<template>
  <q-page class="q-pa-md">
    <div class="row items-center">
      <div class="q-pb-md text-h5">
        {{ pageTitle }}
        <span class="text-subtitle1">列表</span>
      </div>
      <q-space></q-space>
      <search-bar-toggle-btn v-model="$d.searchBarVisibility"></search-bar-toggle-btn>
    </div>
    <!-- 查询菜单 -->
    <div class="q-pa-sm shadow-2 q-mb-md items-center" v-show="$d.searchBarVisibility">
      <div class="row q-col-gutter-sm">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">账册</div>
          <div class="col-8">
            <simple-filter-select auto-select-single-option :options="$d.cbDropdownList" :use-filter="false"
                option-label="cbNo" option-value="cbId" v-model="fpsReq.cbId" />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">报关完成日期从</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.finishedDtStart" :append-icon-show="true" :use-date-picker="true"
                :use-five-minute-precision="true" />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">报关完成日期至</div>
          <div class="col-8">
            <easy-input v-model="fpsReq.finishedDtEnd" :append-icon-show="true" :use-date-picker="true"
                :use-five-minute-precision="true" />
          </div>
        </div>

        <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
          <div class="col-4 text-right searchbar-label">是否食品账册</div>
          <div class="col-8">
            <simple-filter-select :options="$d.ifShowZeroInvItemDropdownList"
                :use-filter="false" v-model="fpsReq.isFoodCb" />
          </div>
        </div>
      </div>
      <div class="row q-pt-sm">
        <div class="q-mr-sm">
          <q-btn color="primary" icon="save_alt" label="导出" @click="downloadListExcel" />
        </div>
      </div>
    </div>
  </q-page>
</template>
<script setup lang="ts">
import {useTitleHelper} from '@njt/foundation/hooks/titleHelper'
import {reactive} from 'vue'
import {BfsCbLite} from '@njt/bfs/defs/basic/cb.d'

const pageTitle = 'MH2库存汇总报表'
useTitleHelper(pageTitle)


let fpsReq: any = reactive({
  isFoodCb: null,
  cbId: null,
  finishedDtStart: null,
  finishedDtEnd: null,
})

let $d = reactive({
  // 账册下拉
  cbDropdownList: [] as BfsCbLite[],
  searchBarVisibility: true,
  ifShowZeroInvItemDropdownList: [
    {
      label: '是',
      value: true
    },
    {
      label: '否',
      value: false
    }
  ],
})

// 账册
void $f.lst.getBfsCbSimpleList()
    .then((resp) => {
      $d.cbDropdownList = resp
    })

const downloadListExcel = function () {
  let params = $f.misc.makeSimpleQueryObj(fpsReq,[])
  let url = $f.misc.makeUrlWithQueryParam(
      '/project/mhlbc/rpt/export-mh2-invline-report',
      params
  )
  $f.nw.downloadFileWithAuth(url,'',false)
}

</script>
